<template>
  <view :class="`index ${MessageShow ? 'active' : ''}`">
    <view :class="`box ${col ? 'active' : ''}`">
      <i v-if="types == 'success'" class="iconfont chat-chenggong success"></i>
      <i
        v-if="types == 'warning'"
        class="iconfont chat-jinggaotubiaosvg warning"
      ></i>
      <i v-if="types == 'error'" class="iconfont chat-error-c error"></i>

      <text class="text">{{ titles }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineExpose, ref, withDefaults } from "vue";
const MessageShow = ref<boolean>(false);
const types = ref<string>("success");
const titles = ref<string>("操作成功");

const poprs = withDefaults(
  defineProps<{
    col: boolean;
  }>(),
  {
    col: false,
  }
);

const show = (type?: string, title?: string) => {
  MessageShow.value = true;
  types.value = type ?? "success";
  titles.value = title ?? "操作成功";
  setTimeout(() => {
    MessageShow.value = false;
  }, 1000);
};

const err = (title?: string) => show("error", title ?? "执行错误");
const succ = (title?: string) => show("success", title);
const warn = (title?: string) => show("warning", title ?? "警告");

defineExpose({ show, err, succ, warn });
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100vh;
  display: flex;
  position: fixed;
  left: 0px;
  top: 0px;
  justify-content: center;
  align-items: center;
  z-index: -99;
  .box {
    min-width: 150rpx;
    max-width: 70%;
    white-space: wrap;
    padding: 20rpx 30rpx;
    background: #fff;
    border-radius: 15rpx;
    box-shadow: 0px 0px 10rpx #0000001a;
    display: flex;
    align-items: center;
    justify-content: center;
    .text {
      color: #636466;

      font-size: 30rpx;
    }
    transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
    .iconfont {
      margin-right: 20rpx;
      font-size: 35rpx;
    }
    .success {
      color: $uni-color-success;
    }
    .error {
      color: $uni-color-error;
    }

    .warning {
      color: $uni-color-warning;
    }
  }
  .box.active {
    flex-direction: column;
    padding: 40rpx 10rpx;
    border-radius: 20rpx;
    min-width: 200rpx;
    .iconfont {
      font-size: 50rpx;
      margin: 0;
      margin-bottom: 20rpx;
    }
    .text {
      margin: 0 10rpx;
    }
  }
}
.index.active {
  z-index: 999;
  .box {
    opacity: 1;
    transform: scale(1.1);
  }
}
</style>
